<template>
	<view class="container">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
		
		<nav-bar fixed title="党员信息" backgroundColor="transparent" />
		
		<image class="bg-top" src="/static/dangjian/bg-top.png" />

		<view class="head">
			<image class="head_avatar" :src="info.avatar" @error="imageError(e, info)" />
			<view class="head_name">{{ info.userName }}</view>
			<button
				v-if="sameDept"
				class="head_btn"
				@tap="goPay(info.djUserId)"
			>
				党费收缴
			</button>
		</view>

		<uni-list class="person">
			<uni-list-item title="党员姓名" show-extra-icon>
				<template #header>
					<image
						class="item_icon"
						src="/static/dangjian/dangyuan/name.png"
					/>
				</template>
				<template #footer>
					<text class="item_wrapper">{{ info.userName }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="入党时间" show-extra-icon>
				<template #header>
					<image
						class="item_icon"
						src="/static/dangjian/dangyuan/time.png"
					/>
				</template>
				<template #footer>
					<text class="item_wrapper">{{ info.admissionTime }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="党龄" show-extra-icon>
				<template #header>
					<image
						class="item_icon"
						src="/static/dangjian/dangyuan/age.png"
					/>
				</template>
				<template #footer>
					<text class="item_wrapper">{{ info.partyAge || 0 }}年</text>
				</template>
			</uni-list-item>
			<uni-list-item title="性别" show-extra-icon>
				<template #header>
					<image
						class="item_icon"
						src="/static/dangjian/dangyuan/gender.png"
					/>
				</template>
				<template #footer>
					<text class="item_wrapper">{{ info.gender }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="所属党支部" show-extra-icon>
				<template #header>
					<image
						class="item_icon"
						src="/static/dangjian/dangyuan/dept.png"
					/>
				</template>
				<template #footer>
					<text class="item_wrapper">{{ info.djDeptName }}</text>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserById } from '@/net/dangyuanguanli'
import NavBar from '../../components/nav-bar.vue'

const userInfo = uni.getStorageSync('userInfo')
const sameDept = computed(() => {
	return userInfo.djDeptId === info.value.djDeptId
})
const info = ref({})
onLoad(async params => {
	const res = await getUserById({ djUserId: params.id })
	info.value = res.data
})

const imageError = (e, item) => {
	item.avatar = '/static/avatar.png'
}

const goPay = id => {
	uni.navigateTo({ url: `./paymentRecord?id=${id}` })
}
</script>

<style lang="scss" scoped>
@import '/static/common.scss';
page {
	height: 100%;
	display: flex;
}
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.bg-top {
	position: fixed;
	top: 0;
	width: 100%;
	height: 308rpx;
	background: linear-gradient(135deg, #eff4f8 0%, #f0f3fa 100%);
}

.head.uni-list {
	background-color: transparent;
}
.head {
	padding: 40rpx 24rpx 60rpx;
	display: flex;
	align-items: center;
	z-index: 2;
	.head_avatar {
		height: 120rpx;
		width: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	.head_name {
		flex: 1;
		font-size: 36rpx;
		font-weight: bold;
		color: #0e1634;
	}
	.head_btn {
		line-height: 64rpx;
		font-size: 28rpx;
		border-radius: 4px;
		border: 1px solid #0b847b;
		color: #0b847b;
		background-color: transparent;
	}
	.button-hover {
		color: #fff;
		border-color: rgba(11, 132, 123, 0.4);
		background-color: rgba(11, 132, 123, 0.5);
	}
}
.item_icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 40rpx;
	> :deep(div) {
		background-size: contain !important;
	}
}
.item_wrapper {
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	color: #0e1634;
}

:deep(.uni-list-item__container) {
	padding: 34rpx 40rpx;
}
:deep(.uni-list-item__content-title) {
	color: #666;
}
.item_wrapper,
:deep(.uni-list-item__content-title) {
	font-size: 30rpx;
}
</style>
